<template>
  <!-- 移动端调试工具 -->
  <div v-if="visible" class="mobile-debugger">
    <!-- 顶部工具栏 -->
    <div class="debugger-header">
      <div class="debugger-title">🐛 调试日志</div>
      <div class="debugger-actions">
        <button @click="clearLogs" class="btn-clear">清空</button>
        <button @click="toggleExpand" class="btn-expand">
          {{ expanded ? '收起' : '展开' }}
        </button>
        <button @click="close" class="btn-close">✕</button>
      </div>
    </div>

    <!-- 日志列表 -->
    <div v-if="expanded" class="debugger-body">
      <div class="log-list">
        <div
          v-for="(log, index) in logs"
          :key="index"
          :class="['log-item', `log-${log.type}`]"
        >
          <div class="log-time">{{ log.time }}</div>
          <div class="log-content">{{ log.message }}</div>
          <div v-if="log.data" class="log-data">
            {{ formatData(log.data) }}
          </div>
        </div>
      </div>
    </div>

    <!-- 悬浮按钮（收起时显示） -->
    <div v-else class="debugger-mini" @click="toggleExpand">
      <div class="mini-badge">{{ logs.length }}</div>
      🐛
    </div>
  </div>

  <!-- 悬浮打开按钮 -->
  <div v-else class="debugger-fab" @click="open">
    🐛
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const visible = ref(false)
const expanded = ref(true)
const logs = ref([])
const maxLogs = 100 // 最多保留100条日志

// 打开调试器
const open = () => {
  visible.value = true
  expanded.value = true
}

// 关闭调试器
const close = () => {
  visible.value = false
}

// 展开/收起
const toggleExpand = () => {
  expanded.value = !expanded.value
}

// 清空日志
const clearLogs = () => {
  logs.value = []
}

// 添加日志
const addLog = (type, message, data = null) => {
  const now = new Date()
  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
  
  logs.value.unshift({
    type,
    message,
    data,
    time
  })

  // 限制日志数量
  if (logs.value.length > maxLogs) {
    logs.value = logs.value.slice(0, maxLogs)
  }
}

// 格式化数据
const formatData = (data) => {
  try {
    return JSON.stringify(data, null, 2)
  } catch (error) {
    return String(data)
  }
}

// 拦截 console 方法
const originalConsoleLog = console.log
const originalConsoleError = console.error
const originalConsoleWarn = console.warn
const originalConsoleInfo = console.info

onMounted(() => {
  // 拦截 console.log
  console.log = (...args) => {
    originalConsoleLog(...args)
    const message = args.map(arg => 
      typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
    ).join(' ')
    addLog('log', message)
  }

  // 拦截 console.error
  console.error = (...args) => {
    originalConsoleError(...args)
    const message = args.map(arg => 
      typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
    ).join(' ')
    addLog('error', message)
  }

  // 拦截 console.warn
  console.warn = (...args) => {
    originalConsoleWarn(...args)
    const message = args.map(arg => 
      typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
    ).join(' ')
    addLog('warn', message)
  }

  // 拦截 console.info
  console.info = (...args) => {
    originalConsoleInfo(...args)
    const message = args.map(arg => 
      typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
    ).join(' ')
    addLog('info', message)
  }

  // 添加初始日志
  addLog('info', '🚀 移动端调试器已启动')
})

onUnmounted(() => {
  // 恢复原始 console 方法
  console.log = originalConsoleLog
  console.error = originalConsoleError
  console.warn = originalConsoleWarn
  console.info = originalConsoleInfo
})

// 暴露方法给外部使用
defineExpose({
  open,
  close,
  addLog,
  clearLogs
})
</script>

<style scoped>
/* 调试器容器 */
.mobile-debugger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 90vw;
  max-width: 400px;
  max-height: 60vh;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* 顶部工具栏 */
.debugger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debugger-title {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.debugger-actions {
  display: flex;
  gap: 8px;
}

.debugger-actions button {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.debugger-actions button:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.btn-clear {
  background: rgba(244, 67, 54, 0.3) !important;
}

.btn-expand {
  background: rgba(33, 150, 243, 0.3) !important;
}

.btn-close {
  background: rgba(158, 158, 158, 0.3) !important;
}

/* 日志列表 */
.debugger-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-item {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border-left: 3px solid #fff;
  font-size: 12px;
  line-height: 1.5;
}

.log-time {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  margin-bottom: 4px;
}

.log-content {
  color: #fff;
  word-break: break-all;
}

.log-data {
  margin-top: 4px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  color: #4fc3f7;
  font-family: monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* 不同类型的日志 */
.log-log {
  border-left-color: #4fc3f7;
}

.log-error {
  border-left-color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}

.log-warn {
  border-left-color: #ff9800;
  background: rgba(255, 152, 0, 0.1);
}

.log-info {
  border-left-color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
}

/* 收起状态 */
.debugger-mini {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  position: relative;
}

.mini-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #f44336;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* 悬浮按钮 */
.debugger-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  cursor: pointer;
  z-index: 9998;
  transition: all 0.3s;
}

.debugger-fab:active {
  transform: scale(0.9);
}

/* 滚动条样式 */
.debugger-body::-webkit-scrollbar,
.log-data::-webkit-scrollbar {
  width: 6px;
}

.debugger-body::-webkit-scrollbar-track,
.log-data::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.debugger-body::-webkit-scrollbar-thumb,
.log-data::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.debugger-body::-webkit-scrollbar-thumb:hover,
.log-data::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>

